<template>
	<el-form
		ref="vProForm"
		:inline="inline"
		:label-width="labelWidth"
		:model="data"
		size="small"
		:rules="rules"
		:label-position="labelPosition"
		:disabled="formDisabled"
		@submit.prevent
	>
		<template v-for="(item, index) in items">
			<template v-if="item.type === 'custom' && item.unformItem">
				<slot :name="item.dataIndex" :data="data" />
			</template>
			<el-form-item
				v-if="!item.hide && !item.unformItem"
				:key="index"
				:label="item.title"
				:label-width="item.labelWidth"
				:prop="getDataIndex(item, index)"
				:class="item.class"
			>
				<template v-if="item.customLabel && item.type === 'customLabel'">
					<div class="custom_label" v-html="item.customLabel" />
				</template>
				<!-- text输入框 -->
				<el-input
					v-if="
						!item.type || item.type === 'input' || item.type === 'inputText'
					"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					:maxlength="item.maxlength"
					:placeholder="item.placeholder || '请输入' + item.title"
					@change="item.change && item.change(data[item.dataIndex])"
					@keyup.enter="
						!item.change && item.enter && item.enter(data[item.dataIndex])
					"
				/>
				<!-- number输入框 -->
				<el-input
					v-else-if="item.type === 'inputNumber'"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					type="number"
					:maxlength="item.maxlength"
					:placeholder="item.placeholder || '请输入' + item.title"
					@change="item.change && item.change(data[item.dataIndex])"
					@keyup.enter="
						!item.change && item.enter && item.enter(data[item.dataIndex])
					"
				/>
				<!-- password输入框 -->
				<el-input
					v-else-if="item.type === 'inputPassword'"
					v-model="data[item.dataIndex]"
					auto-complete="new-password"
					:disabled="item.disabled"
					type="password"
					:maxlength="item.maxlength"
					:placeholder="item.placeholder || '请输入' + item.title"
					@change="item.change && item.change(data[item.dataIndex])"
				/>
				<!-- 文本域 -->
				<el-input
					v-else-if="item.type === 'textarea'"
					v-model="data[item.dataIndex]"
					type="textarea"
					:disabled="item.disabled"
					:placeholder="item.placeholder || '请输入' + item.title"
					:maxlength="item.maxlength"
					:show-word-limit="item.maxlength ? true : false"
					:autosize="item.autosize ? item.autosize : { minRows: 2, maxRows: 4 }"
					@change="item.change && item.change(data[item.dataIndex])"
				/>
				<!-- 下拉框 -->
				<el-select
					v-else-if="item.type === 'select'"
					v-model="data[item.dataIndex]"
					:filterable="
						item.selectAttributes && item.selectAttributes.filterable
							? item.selectAttributes.filterable
							: false
					"
					:filter-method="
						item.selectAttributes && item.selectAttributes.filterMmethod
					"
					style="width: 100%"
					:disabled="item.disabled"
					:placeholder="item.placeholder || '请选择' + item.title"
					@change="item.change && item.change(data[item.dataIndex])"
				>
					<el-option
						v-for="op in item.options"
						:key="op[item.dataIndex]"
						:label="item.label ? op[item.label] : op[item.dataIndex]"
						:value="op[item.dataIndex]"
					/>
				</el-select>
				<el-select
					v-else-if="item.type === 'selectMap'"
					v-model="data[item.dataIndex]"
					style="width: 100%"
					:filterable="
						item.selectAttributes && item.selectAttributes.filterable
							? item.selectAttributes.filterable
							: false
					"
					:filter-method="
						item.selectAttributes && item.selectAttributes.filterMmethod
					"
					:disabled="item.disabled"
					:placeholder="item.placeholder || '请选择' + item.title"
					@change="item.change && item.change(data[item.dataIndex])"
				>
					<el-option
						v-for="op in optionsMap(item)"
						:key="op.value"
						:label="op.label"
						:value="op.value"
					/>
				</el-select>
				<!-- 单选 -->
				<el-radio-group
					v-else-if="item.type === 'radioMap'"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				>
					<el-radio
						v-for="ra in optionsMap(item)"
						:key="ra.value"
						:label="ra.value"
						:disabled="ra.disabled"
					>
						{{ ra.label }}
					</el-radio>
				</el-radio-group>
				<el-radio-group
					v-else-if="item.type === 'radio'"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				>
					<el-radio
						v-for="ra in item.options"
						:key="ra[item.dataIndex]"
						:label="ra[item.dataIndex]"
						:disabled="ra.disabled"
					>
						{{ item.label ? ra[item.label] : ra[item.dataIndex] }}
					</el-radio>
				</el-radio-group>
				<!-- 单选按钮 -->
				<el-radio-group
					v-else-if="item.type === 'radioButton'"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				>
					<el-radio-button
						v-for="ra in item.options"
						:key="ra[item.dataIndex]"
						:label="ra[item.dataIndex]"
						:disabled="ra.disabled"
					>
						{{ item.label ? ra[item.label] : ra[item.dataIndex] }}
					</el-radio-button>
				</el-radio-group>
				<!-- 复选框 -->
				<el-checkbox-group
					v-else-if="item.type === 'checkboxMap'"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				>
					<el-checkbox
						v-for="ch in optionsMap(item)"
						:key="ch.value"
						:label="ch.value"
						:border="item.border"
						:disabled="ch.disabled"
					>
						{{ ch.label }}
					</el-checkbox>
				</el-checkbox-group>
				<el-checkbox-group
					v-else-if="item.type === 'checkbox'"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				>
					<el-checkbox
						v-for="ch in item.options"
						:key="ch[item.dataIndex]"
						:label="ch[item.dataIndex]"
						:border="item.border"
						:disabled="ch.disabled"
					>
						{{ item.label ? ch[item.label] : ch[item.dataIndex] }}
					</el-checkbox>
				</el-checkbox-group>
				<!-- 日期 -->
				<el-date-picker
					v-else-if="
						item.type === 'time' &&
						(!item.timeAttributes ||
							!item.timeAttributes.type ||
							item.timeAttributes.type == 'date')
					"
					v-model="data[item.dataIndex]"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				/>
				<!-- 时间 -->
				<el-time-select
					v-else-if="
						item.type === 'time' &&
						item.timeAttributes &&
						item.timeAttributes.type == 'timeSelect'
					"
					v-model="data[item.dataIndex]"
					:picker-options="item.timeAttributes.pickerOptions || {}"
					:placeholder="item.placeholder || '请选择时间'"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				/>
				<el-time-picker
					v-else-if="
						item.type === 'time' &&
						item.timeAttributes &&
						item.timeAttributes.type == 'timePicker'
					"
					v-model="data[item.dataIndex]"
					:picker-options="item.timeAttributes.pickerOptions || {}"
					:is-range="item.timeAttributes.isRange || false"
					:range-separator="item.timeAttributes.rangeSeparator || '-'"
					:start-placeholder="
						item.timeAttributes.startPlaceholder || '开始时间'
					"
					:end-placeholder="item.timeAttributes.endPlaceholder || '结束时间'"
					:placeholder="item.placeholder || '请选择时间'"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				/>
				<!-- 日期时间 -->
				<el-date-picker
					v-else-if="
						item.type === 'time' &&
						item.timeAttributes &&
						item.timeAttributes.type == 'datetime'
					"
					v-model="data[item.dataIndex]"
					type="datetime"
					:placeholder="item.placeholder || '请选择时间'"
					:picker-options="item.timeAttributes.pickerOptions || {}"
					:disabled="item.disabled"
					@change="
						(datetimerangeValue) =>
							dateParseTimeChange(item, datetimerangeValue)
					"
				/>
				<el-date-picker
					v-else-if="
						item.type === 'time' &&
						item.timeAttributes &&
						item.timeAttributes.type == 'datetimerange'
					"
					v-model="data[item.dataIndex]"
					type="datetimerange"
					:picker-options="item.timeAttributes.pickerOptions || {}"
					:range-separator="item.timeAttributes.rangeSeparator || '-'"
					:start-placeholder="
						item.timeAttributes.startPlaceholder || '开始时间'
					"
					:end-placeholder="item.timeAttributes.endPlaceholder || '结束时间'"
					:placeholder="item.placeholder || '请选择时间'"
					:default-time="
						item.timeAttributes.defaultTime
							? item.timeAttributes.defaultTime
							: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]
					"
					:disabled="item.disabled"
					@change="item.change && item.change(data[item.dataIndex])"
				/>
				<!-- 日期区间 -->
				<template v-else-if="item.type === 'datetimerange'">
					<el-col :span="11">
						<el-form-item class="mr0" :prop="item.dataIndex.startTime">
							<el-date-picker
								v-model="data[item.dataIndex.startTime]"
								style="width: 100%"
								:editable="false"
								type="datetime"
								:placeholder="
									item.placeholder ? item.placeholder[0] : '开始时间'
								"
								:disabled="item.disabled"
								:clearable="item.clearable"
								:default-time="
									item.defaultTime1
										? item.defaultTime1
										: new Date(2000, 1, 1, 0, 0, 0)
								"
								@change="
									datetimerangeValue =>
										datetimerangeChange(item, datetimerangeValue, 0)
								"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<span class="vp_telephone_line">-</span>
					</el-col>
					<el-col :span="12">
						<el-form-item :prop="item.dataIndex.endTime">
							<el-date-picker
								style="width: 100%"
								type="datetime"
								v-model="data[item.dataIndex.endTime]"
								:editable="false"
								:placeholder="
									item.placeholder ? item.placeholder[1] : '结束时间'
								"
								:disabled="item.disabled"
								:clearable="item.clearable"
								:default-time="
									item.defaultTime2
										? item.defaultTime2
										: new Date(2000, 1, 1, 23, 59, 59)
								"
								@change="
									datetimerangeValue =>
										datetimerangeChange(item, datetimerangeValue, 1)
								"
							/>
						</el-form-item>
					</el-col>
				</template>
				<!-- 文件上传 -->
				<template v-else-if="item.type === 'upload'">
					<el-upload
						:ref="item.dataIndex"
						:class="item.class"
						:accept="item.uploadAttributes.accept"
						:limit="item.uploadAttributes.limit"
						:file-list="item.uploadAttributes.fileList || data[item.dataIndex]"
						:auto-upload="isautoUpload(item)"
						:disabled="item.disabled"
						:before-upload="
							(files, fileList) => {
								beforeUpload(item, files, fileList)
							}
						"
						:on-remove="
							(files, fileList) => {
								onRemove(item, files, fileList)
							}
						"
						:on-change="
							(files, fileList) => {
								onChange(item, files, fileList)
							}
						"
						:on-exceed="
							(files, fileList) => {
								onExceed(item, files, fileList)
							}
						"
						:http-request="
							file => {
								item.uploadAttributes.httpRequest(file)
							}
						"
					>
						<el-button class="mr20" icon="el-icon-plus"> 添加文件 </el-button>
						<el-button
							v-if="!isautoUpload(item)"
							type="primary"
							@click="upExcelData(item.dataIndex)"
						>
							导入
						</el-button>
					</el-upload>
				</template>
				<!-- 图片上传 -->
				<template v-else-if="item.type === 'uploadImage'">
					<div
						v-for="(listItem, listIndex) in data[item.dataIndex]"
						:key="listIndex"
						class="vp_image_box"
					>
						<el-image
							fit="cover"
							class="vp_image_item"
							z-index="9999"
							:preview-src-list="[listItem[item.uploadAttributes.imageName]]"
							:src="listItem[item.uploadAttributes.imageName]"
						>
							<div class="el-image__error">
								<i class="el-icon-picture-outline" />
							</div>
						</el-image>
						<el-checkbox
							v-if="item.uploadAttributes.isChange"
							@change="uploadImageChange(item, listItem, listIndex)"
							class="imageCheckbox"
							v-model="listItem.checked"
						></el-checkbox>
						<div class="vp_image_item_dlt" v-if="canItBeModified(item)">
							<span
								@click="deleteImage(item, listItem, listIndex)"
								v-if="!item.uploadAttributes.isEdit"
								>删除</span
							>
							<el-upload
								v-else
								:ref="item.dataIndex"
								class=""
								:multiple="1"
								:limit="1"
								:headers="item.uploadAttributes.uploadImageHead"
								:action="item.uploadAttributes.action"
								:disabled="item.disabled"
								:file-list="item.fileList"
								:accept="
									item.uploadAttributes.accept
										? item.uploadAttributes.accept
										: 'image/gif, image/jpeg, image/jpg, image/png'
								"
								:show-file-list="false"
								:before-upload="
									file => {
										replaceUpload(item, listIndex, file)
									}
								"
								:http-request="
									file => {
										item.uploadAttributes.httpRequest(file)
									}
								"
							>
								<div>更换</div>
							</el-upload>
						</div>
					</div>
					<el-upload
						v-if="
							data[item.dataIndex].length >= item.uploadAttributes.limit
								? false
								: true
						"
						:ref="item.dataIndex"
						class="vp_upload vp-vue-materials_drag"
						:multiple="item.uploadAttributes.limit > 1 ? true : false"
						:limit="item.uploadAttributes.limit"
						:headers="item.uploadAttributes.uploadImageHead"
						:action="item.uploadAttributes.action"
						:disabled="item.disabled"
						drag
						:accept="
							item.uploadAttributes.accept
								? item.uploadAttributes.accept
								: 'image/gif, image/jpeg, image/jpg, image/png'
						"
						:show-file-list="false"
						:before-upload="item.uploadAttributes.beforeAvatarUpload"
						:file-list="data[item.dataIndex]"
						:on-exceed="
							(files, fileList) => {
								handleExceed(item, files, fileList)
							}
						"
						:http-request="
							file => {
								item.uploadAttributes.httpRequest(file)
							}
						"
					>
						<div>
							新增图片相册<br />{{
								'(暂定最多' + item.uploadAttributes.limit + '张)'
							}}
						</div>
					</el-upload>
				</template>
				<!-- 图片上传 -->
				<!-- <template v-else-if="item.type === 'uploadImageDraggable'">
					<draggable
						v-model="data[item.dataIndex]"
						@update="
							(evt) => {
								imageUpdate(evt, item)
							}
						"
						:options="data.options ? data.options : { animation: 500 }"
					>
						<transition-group>
							<div
								v-for="(listItem, listIndex) in data[item.dataIndex]"
								:key="listIndex"
								class="vp_image_box"
							>
								<el-image
									fit="cover"
									class="vp_image_item"
									z-index="9999"
									:preview-src-list="[
										listItem[item.uploadAttributes.imageName],
									]"
									:src="listItem[item.uploadAttributes.imageName]"
								>
									<div class="el-image__error">
										<i class="el-icon-picture-outline" />
									</div>
								</el-image>
								<el-checkbox
									v-if="item.uploadAttributes.isChange"
									@change="uploadImageChange(item, listItem, listIndex)"
									class="imageCheckbox"
									v-model="listItem.checked"
								></el-checkbox>
								<div class="vp_image_item_dlt" v-if="canItBeModified(item)">
									<span
										@click="deleteImage(item, listItem, listIndex)"
										v-if="!item.uploadAttributes.isEdit"
										>删除</span
									>
									<el-upload
										v-else
										:ref="item.dataIndex"
										class=""
										:multiple="1"
										:limit="1"
										:headers="item.uploadAttributes.uploadImageHead"
										:action="item.uploadAttributes.action"
										:disabled="item.disabled"
										:file-list="item.fileList"
										:accept="
											item.uploadAttributes.accept
												? item.uploadAttributes.accept
												: 'image/gif, image/jpeg, image/jpg, image/png'
										"
										:show-file-list="false"
										:before-upload="
											(file) => {
												replaceUpload(item, listIndex, file)
											}
										"
										:http-request="
											(file) => {
												item.uploadAttributes.httpRequest(file)
											}
										"
									>
										<div>更换</div>
									</el-upload>
								</div>
							</div>
						</transition-group>
					</draggable>
					<el-upload
						v-if="
							data[item.dataIndex].length >= item.uploadAttributes.limit
								? false
								: true
						"
						:ref="item.dataIndex"
						class="vp_upload vp-vue-materials_drag"
						drag
						:multiple="item.uploadAttributes.limit > 1 ? true : false"
						:limit="item.uploadAttributes.limit"
						:headers="item.uploadAttributes.uploadImageHead"
						:action="item.uploadAttributes.action"
						:disabled="item.disabled"
						:accept="
							item.uploadAttributes.accept
								? item.uploadAttributes.accept
								: 'image/gif, image/jpeg, image/jpg, image/png'
						"
						:show-file-list="false"
						:before-upload="item.uploadAttributes.beforeAvatarUpload"
						:file-list="data[item.dataIndex]"
						:on-exceed="
							(files, fileList) => {
								handleExceed(item, files, fileList)
							}
						"
						:http-request="
							(file) => {
								item.uploadAttributes.httpRequest(file)
							}
						"
					>
						<div>
							新增图片相册<br />{{
								'(暂定最多' + item.uploadAttributes.limit + '张)'
							}}
						</div>
					</el-upload>
				</template> -->
				<!-- 自定义插槽 -->
				<template v-else-if="item.type === 'custom'">
					<slot :name="item.dataIndex" :data="data" />
				</template>
				<!-- 文本 -->
				<template v-else-if="item.type === 'text'">
					<div v-html="data[item.dataIndex]"></div>
				</template>
			</el-form-item>
		</template>
		<!-- 按钮事件-换行 -->
		<div v-if="formAction && actionInline">
			<el-form-item>
				<template v-for="(action, index) in formAction" :key="index">
					<el-button
						v-show="!getAtionFormatter(action).hide"
						:type="action.type"
						@click="actionButtonClick($event, action)"
					>
						{{ getAtionFormatter(action).title }}
					</el-button>
				</template>
			</el-form-item>
		</div>
		<el-form-item v-else-if="formAction">
			<template v-for="(action, index) in formAction" :key="index">
				<el-button
					v-show="!getAtionFormatter(action).hide"
					:type="action.type"
					@click="actionButtonClick($event, action)"
				>
					{{ getAtionFormatter(action).title }}
				</el-button>
			</template>
		</el-form-item>
	</el-form>
</template>

<script>
/**
 * @Description: 使用例子：
 * <div>
		<vProForm :inline="true"
      :data="searchData"
      :items="searchCfg"
      :formAction="searchAction"></vProForm>
	</div>
 * @property {string} labelWidth 文本宽度
 * @property {array} items 组件使用数据的配置
 * @property {boolean} inline 是否换行
 * @property {object} data 组件渲染所使用的数据
 * @property {array} rules 表单校验
 * @property {array} formAction 表单按钮
 * @property {string} labelPosition 表单文本对齐方式
 * @property {boolean} actionInline 表单按钮是否需要换行
 */
// import draggable from 'vuedraggable'
export default {
	name: 'vProForm',
	props: {
		// 分行, 参考element
		inline: {
			type: Boolean,
			default: false,
		},
		// 表单禁用
		formDisabled: {
			type: Boolean,
			default: false,
		},
		// 文本宽度, 参考element
		labelWidth: {
			type: String,
			default: '',
		},
		/**
		 *  表单配置, 参考element
		 *  valueMap(Array): [keyName, valueName]
		 */
		items: {
			type: Array,
			default: () => [],
		},
		// 表单数据, 要与items子项的prop对应
		data: {
			type: Object,
			default: () => {},
		},
		// 表单校验, 参考element
		rules: {
			type: Object,
			default: () => {},
		},
		/**
		 *  表单按钮
		 *  isClear(Boolean): 是否为清除表单
		 */
		formAction: {
			type: Array,
			default: () => [],
		},
		// 表单文本对齐方式, 参考element
		labelPosition: {
			type: String,
			default: 'left',
		},
		// 表单按钮是否需要换行
		actionInline: {
			type: Boolean,
			default: false,
		},
	},
	components: {
		// draggable,
	},
	data() {
		return {
			dyData: {},
		}
	},
	methods: {
		imageUpdate(evt, item) {
			if (item.imageUpdate) {
				item.imageUpdate(evt)
			}
			this.$forceUpdate()
		},
		/**
		 * @Description:
		 * @param {String} str 时间字符串
		 * @param {Boolean} isEnd 是否是结束时间
		 * @return: 1秒后的时间戳
		 */
		dateParseTime(str, isEnd) {
			if (str === null || !str) {
				return ''
			}
			str = new Date(str).getTime()
			if (isEnd) {
				str += 999
			}
			return str
		},
		optionsMap(item) {
			const list = []
			for (const key in item.options) {
				list.push({
					label: key,
					value: item.options[key],
				})
			}
			return list
		},
		// 是否可以更改
		canItBeModified(item) {
			if (item.uploadAttributes.canNotBeModified) {
				return false
			}
			return true
		},
		// 图片勾选回调
		uploadImageChange(item, listItem, listIndex) {
			if (item.uploadAttributes.change) {
				item.uploadAttributes.change(listItem, listIndex)
			}
		},
		deleteImage(item, imageItem, index) {
			/** 删除商品图片 * */
			const self = this
			this.$confirm('确定删除此图片', '提示', {
				type: 'warning',
				callback(action) {
					if (action === 'confirm') {
						if (item.deleteImage) {
							item.deleteImage(self.data[item.dataIndex][index])
						}
						self.$delete(self.data[item.dataIndex], index)
						self.$forceUpdate()
					}
				},
			})
		},
		upExcelData(refName) {
			this.$refs[refName][0].submit()
		},
		replaceUpload(item, index) {
			this.$delete(this.data[item.dataIndex], index)
		},
		beforeUpload(item, files, fileList) {
			// 文件状态改变时
			if (item.uploadAttributes.beforeUpload) {
				item.uploadAttributes.beforeUpload(item, files, fileList)
			}
		},
		onRemove(item, files, fileList) {
			// 文件状态改变时
			if (item.uploadAttributes.onRemove) {
				item.uploadAttributes.onRemove(item, files, fileList)
			}
		},
		onChange(item, files, fileList) {
			// 文件状态改变时
			if (item.uploadAttributes.onChange) {
				item.uploadAttributes.onChange(item, files, fileList)
			}
		},
		onExceed(item, files, fileList) {
			// 文件超出个数限制时的钩子
			if (item.uploadAttributes.onExceed) {
				item.uploadAttributes.onExceed(item, files, fileList)
			} else {
				this.$message.warning({
					message: `最多只能上传${item.uploadAttributes.limit}个文件`,
				})
			}
		},
		handleExceed(item) {
			/** 文件超出回调 * */
			this.$message.warning({
				message: `最多只能上传${item.uploadAttributes.limit}张图片`,
			})
		},
		resetFields() {
			// 重置表单
			this.$refs.vProForm.resetFields()
		},
		clearValidate() {
			// 移除表单项的校验结果
			this.$refs.vProForm.clearValidate()
		},
		actionButtonClick(e, data) {
			/** 按钮点击事件 * */
			if (data.isClear) {
				// 清空表单
				this.$refs.vProForm.resetFields()
				this.items.map((item, index) => {
					if (item.type === 'datetimerange') {
						const dateArr = [
							this.data[item.dataIndex[0]],
							this.data[item.dataIndex[1]],
						]
						this.dyData.datetimerangeArray[index] = dateArr
						// this.$set(this.dyData, `datetimerangeArray${index}`, dateArr)
					}
				})
			} else if (data.click) {
				if (this.rules && !data.cancel) {
					this.$refs.vProForm.validate(valid => {
						if (valid) {
							// 规则校验通过
							if (data.click) {
								data.click(e)
							}
						}
					})
				} else {
					data.click(e)
				}
			}
		},
		isautoUpload(item) {
			// 判断是否是自动上传文件
			if (item.uploadAttributes && 'autoUpload' in item.uploadAttributes) {
				if (item.uploadAttributes.autoUpload) {
					return true
				}
				return false
			}
			return true
		},
		getAtionFormatter(action) {
			/** 按钮渲染更新 * */
			if (action.customRender) {
				const newAction = action.customRender(Object.assign({}, action))
				if (newAction) {
					action = Object.assign(action, newAction)
				}
			}
			return action
		},
		getDataIndex(item) {
			/** 过滤dataIndex名称绑定 * */
			if (
				Object.prototype.toString.call(item.dataIndex) === '[object String]'
			) {
				return item.dataIndex
			}
			return ''
		},
		dateParseTimeChange(item, datetimerangeValue) {
			this.data[item.dataIndex] = this.dateParseTime(datetimerangeValue)
			item.change && item.change()
		},
		datetimerangeChange(item, datetimerangeValue, index) {
			/** 选择时间区间变化回调 * */
			if (datetimerangeValue) {
				if (index === 0) {
					this.data[item.dataIndex.startTime] =
						this.dateParseTime(datetimerangeValue)
				} else if (index === 1) {
					this.data[item.dataIndex.endTime] = this.dateParseTime(
						datetimerangeValue,
						true
					)
				}
			} else if (index === 0) {
				this.data[item.dataIndex[0]] = ''
			} else if (index === 1) {
				this.data[item.dataIndex[1]] = ''
			}
			item.change && item.change()
		},
	},
}
</script>
<style lang="scss" scoped>
/** 图片上传样式 **/
.vp_image_box {
	overflow: hidden;
	position: relative;
	cursor: pointer;
	width: 120px;
	height: 120px;
	line-height: 116px;
	margin: 5px;
	padding: 0px;
	text-align: center;
	float: left;
	border: 1px solid #ccc;
	margin-top: 15px;
	border-radius: 5px;
	box-shadow: #ebacac 0px 0px 7px 1px;
	.vp_image_item {
		width: 100%;
		height: 100%;
	}
	.vp_image_item_dlt {
		width: 100%;
		height: 24px;
		position: absolute;
		background: #e7e7e7;
		bottom: 0;
		left: 0;
		z-index: 10;
		text-align: center;
		line-height: 24px;
		border: 0;
		border-top-width: 0px;
	}
}
.vp_upload {
	cursor: pointer;
	width: 120px;
	height: 120px;
	background: #ddd;
	float: left;
	margin: 5px;
	text-align: center;
	line-height: 20px;
	border: 1px solid #ccc;
	position: relative;
}
.vp_telephone_line {
	width: 100%;
	text-align: center;
	display: block;
}
.mr0 {
	margin-right: 0;
}
.mr20 {
	margin-right: 20px;
}
.custom_label {
	line-height: 20px;
}
.imageCheckbox {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
}
.el-form-item .el-form-item {
	margin: 0 !important;
}
</style>
<style lang="scss">
.vp-vue-materials_drag .el-upload-dragger {
	cursor: pointer;
	width: 100%;
	height: 100%;
	background: transparent;
	float: left;
	text-align: center;
	line-height: 20px;
	padding-top: 35px;
	position: absolute;
	left: 0;
	top: 0;
}
</style>
